import { Button, Timeline } from "antd";
import React from "react";
import { useState, useEffect } from 'react';
import './index.less'
import { CloseOutlined } from "@ant-design/icons";
import Dzyxxzq from "./Dzyxxzq";
import Dzzbfb from "./Dzzbfb";
import Zbdw from "./Zbdw";
import Yjbncs from "./Yjbncs";
import Wzcbk from "./Wzcbk";
import Scbg from "./Scbg";
export default function Bgsc(props) {
    const [show, setShow] = useState(true);
    const handleShow = () => {
        setShow(false);
    }
    const allSteps = [
        {
            children: '灾情信息'
        },
        {
            children: '地震影响行政区'
        },
        {
            children: '地震周边分布'
        }, {
            children: '地震周边队伍分布'
        },
        {
            children: '地震周边避难所分布'
        },
        {
            children: '地震周边物资储备库'
        },
        {
            children: '生成报告'
        }
    ]
    const [currentPage, setCurrentPage] = useState(2);
    const handleNext = () => {
        // if (currentPage < allSteps.length) {
        //     setCurrentPage(currentPage + 1);
        // }
        currentPage <= allSteps.length && setCurrentPage(currentPage + 1);
    };
    const handleLast = () => {
        currentPage > 2 && setCurrentPage(currentPage - 1);
    }
    return <>
        {
            show && <div className="layout-v bgsc">
                <div className='layout-v'>
                        <h1 style={{
                            marginLeft: 10,
                        }}>
                                <span>报告生成-四川省宜宾市高县1.0级地震</span>
                                <Button size="small" icon={<CloseOutlined />} onClick={handleShow} style={{marginLeft:'35%'}}/>
                        </h1>
                </div>
                <div className="fill layout-h">
                    <div>
                        <Timeline className='timeline' items={allSteps} />
                        <div className="layout-v ">
                              <Button style={{ marginLeft: 10 }} onClick={handleLast}>上一步</Button><br />
                              <Button style={{ marginLeft: 10 }} onClick={handleNext}>下一步</Button>
                        </div>
                    </div>
                    <div className="fill">
                        {currentPage === 2 && (
                            <div className="layout-h wh100">
                                <div className="zqxx">
                                    <textarea className='textarea'></textarea>
                                </div>
                            </div>
                        )}
                        {currentPage === 3 && <Dzyxxzq />}
                        {currentPage === 4 && <Dzzbfb />}
                        {currentPage === 5 && <Zbdw />}
                        {currentPage === 6 && <Yjbncs />}
                        {currentPage === 7 && <Wzcbk />}
                        {currentPage === 8 && <Scbg />}
                    </div>
                </div>

            </div>
        }

    </>
}